<template>
    <div class="mt10">
      <AplidForm v-model="searchModel" v-bind="govSearchConfig" ref="searchRef" :showRules="false" @reset="onReset"
        @submit="onSearch" />
  
      <ul class="flex align-center nav-box">
        <li class="nav-item" :class="{ active: item.value == activeArea }" v-for="(item, index) in nowAreaList"
          @click="handleCheckArea(item, index)" :key="index">{{ item.label }}</li>
      </ul>
  
      <el-table show-summary :data="tableData" style="width: 100%">
        <el-table-column show-summary align="center" :label="currentName+'居家绩效考核对象统计'">
            <el-table-column label="街道/社区" prop="renge">
            <template #default="{ row }">
                <el-button text @click="handleNext(row)">{{ row.name }}</el-button>
            </template>
            </el-table-column>
            <el-table-column label="服务人数" align="center" prop="homeServicePersonnelNum" />
            <el-table-column label="服务人次" align="center" prop="homeServicePersonSecond" />
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { govSearchConfig } from '../config'
  import apiMod from '@/apiMod'
  const userInfo = JSON.parse(sessionStorage.getItem('apld-xningxiang-userInfo')).content
  let currentName = ref('')
  currentName.value = userInfo.organizationName
  const activeArea = ref('')
  const nowAreaList = ref([
    {
      label: '当前市名称',
      value: '',
      level: 0
    },
  ])
  const searchModel = ref()
  const tableData = ref([])
  const nowRowData = ref({})
  const currentArea = ref()
  const handleCheckArea = (item: any, index: number) => {
    // 删除掉后面的
    activeArea.value = item.value
    nowAreaList.value = nowAreaList.value.slice(0, index + 1)
    console.log('辉',nowAreaList.value)
    lastLevel.value = item.level
    getInitData(item.value,item.level)
  }
  // 市看区1,区看街道2，街道看社区传3，本社区传0
  let classifyList = ref([])
  let classifyLength = ref(0)
  let lastLevel = ref(0)
  const getAreaList = () => {
    classifyList.value.push(userInfo.authArea || '')
    classifyList.value.push(userInfo.authStreet || '')
    classifyList.value.push(userInfo.authCommunity || '')
    // 如果classifyList的长度为0，市账户不管，长度为1，区账户，最多下钻2级；长度为2，街道账户，最多下钻1级，长度为3,社区账户，最多下钻0级
    classifyLength.value = classifyList.value.filter(Boolean).length
    currentArea.value = classifyList.value.filter(Boolean)[classifyLength.value-1]
      // 得到最初的地区// 如果是区或者街道可以下钻一级，社区不下钻
      if(userInfo.classifyId==3){
        if(classifyLength.value==3){
          nowAreaList.value =  [
            {
              label:userInfo.organizationName,
              value:currentArea.value,
              level: 0
            }
          ]
          lastLevel.value = 0
        }else{
          nowAreaList.value =  [
            {
              label:userInfo.organizationName,
              value:currentArea.value,
              level: 1
            }
          ]
          lastLevel.value = 1
        }
      activeArea.value = currentArea.value
    }
    getInitData( nowAreaList.value[0].value, nowAreaList.value[0].level)
  }
  
  const handleNext = (row) => {
    console.log('查看',row)
    const indexKey = nowAreaList.value.findIndex(item => item.value === row.id)
    if(indexKey !==-1) {
      return
    }
    nowRowData.value = row
    activeArea.value = row.id
    if(classifyLength.value==1){
      // 区
      if(lastLevel.value<2){
        nowAreaList.value.push({
          label:row.name,
          value:row.id,
          level: ++lastLevel.value
        })
      }else if(lastLevel.value==2){
        if(nowAreaList.value.length==2){
        activeArea.value = nowAreaList.value[1].value
        return
      }else{
          nowAreaList.value.push({
          label:row.name,
          value:row.id,
          level: 2
        })
        }
      }
      
    }else if(classifyLength.value==2){
      // 街道
      if(lastLevel.value<1){
        nowAreaList.value.push({
        label:row.name,
        value:row.id,
        level: ++lastLevel.value
      })
      }else if(lastLevel.value==1){
        if(nowAreaList.value.length==2){
          nowAreaList.value[1] = {
            label:row.name,
            value:row.id,
            level: 1
          }
        }else{
          nowAreaList.value.push({
          label:row.name,
          value:row.id,
          level: 1
        })
        }
      }
    }else if(classifyLength.value==3){
      // 社区
       return
    }
    let lastItem = nowAreaList.value[nowAreaList.value.length-1]
    getInitData(lastItem.value,lastItem.level)
  }
  const getInitData = (parentId, type) => {
    apiMod.view_statistics_tblReposOrder({
      parentId,
      type,
      timeBetween: searchModel.value?.timeBetween || ''
    }).then(res=>{
      tableData.value = res.data.resp
      console.log(tableData.value)
    })
  }
  const onSearch = (form, done) => {
    searchModel.value = form
    let current = nowAreaList.value[nowAreaList.value.length-1]
    getInitData(current.value,current.level)
    done()
  }
  
  const onReset = () => {
    searchModel.value = {}
    // getInitData()
    let current = nowAreaList.value[nowAreaList.value.length-1]
    getInitData(current.value,current.level)
  }
  
  onMounted(() => {
  
   
    getAreaList()
    // getInitData()
  })
  </script>
  
  <style scoped lang="scss">
  .nav-box {
    width: 100%;
    display: flex;
    gap: 20px;
    padding-bottom: 10px;
  
    .nav-item {
      position: relative;
  
      &:not(:last-child):after {
        content: '>';
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
        right: -25px;
        font-weight: bold;
      }
  
      &:hover {
        cursor: pointer;
      }
    }
  
    .active {
      color: rgb(6, 69, 243);
      font-weight: bold;
    }
  }
  </style>
  